<template>
  <div class="app-container">
    添加收费

    <el-form label-width="120px">
      <el-form-item label="清洁费">
        <el-input v-model="proCharge.cleanCost"/>
      </el-form-item>
      <el-form-item label="园林费">
        <el-input v-model="proCharge.maintainCost"/>
      </el-form-item>
      <el-form-item label="缴费状态">
        <el-input v-model="proCharge.status"/>
      </el-form-item>
      <el-form-item label="业主id">
        <el-input v-model="proCharge.ownerId"/>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import chargeApi from '@/api/pro/charge'

export default {
  data(){
    return{
      proCharge: {
        cleanCost: '',
        maintainCost: '',
        status:0,
        ownerId:""
      },
      //是否禁用按钮
      saveBtnDisabled:false,
      //dev.env.js里的地址
      BASE_API:process.env.BASE_API
    }
  },
  created(){
    this.init()
  },
  watch:{
    $route(to, from){
      this.init()
    }
  },
  methods:{
    init(){
      //判断路径中是否有id值
      if (this.$route.params && this.$route.params.id) 
      {
        const id = this.$route.params.id
        this.getChargeInfo(id)
      }
      else
      {
        this.proCharge = {}
      }
    },
    getChargeInfo(id){
      chargeApi.getChargeById(id)
        .then(response => {
          this.proCharge = response.data.charge
        })
    },
    saveOrUpdate(){
      if (!this.proCharge.id)
      {
        //添加
      this.saveCharge()
      }
      else
      {
        //修改
        this.updateCharge()
      }
    },
    saveCharge(){
      chargeApi.addCharge(this.proCharge)
        .then(response => {
          //提示信息
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          //刷新页面
          this.$router.push({path:'/charge/table'})
        })
    },
    updateCharge(){
      chargeApi.updateChargeInfo(this.proCharge)
        .then(response => {
          //提示信息
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          //刷新页面
          this.$router.push({path:'/charge/table'})
        })
    }
  }
}
</script>

